/* eslint-disable no-nested-ternary */
import React, { Fragment } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Alert, Divider } from 'antd';
import router from 'umi/router';
import StandardTable from '@/components/StandardTable';
import { checkPermissions } from '@/utils/authority';
import { formatNumber } from '@/utils/utils';

@connect(({ chargebillns, loading }) => ({
  chargebillns,
  loading: loading.models.chargebillns,
  noBillData: chargebillns.noBillData,
  formFieldsValue: chargebillns.formFieldsValue,
}))
@Form.create()
class BasicList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedRowKeys: [],
      selectedRows: [],
    };
  }

  componentDidMount() {
    this.getList(1, 10);
  }

  // 获取列表数据
  getList = (nowPage = 1, pageNum = 10) => {
    const { dispatch, formFieldsValue } = this.props;
    const pageArg = {
      currentPage: nowPage,
      pageSize: pageNum,
      ...formFieldsValue,
    };
    dispatch({
      type: 'chargebillns/getNotEnterList',
      payload: {
        pageArg,
      },
    });
  };

  // 复选框
  handleSelectRows = (selectedRows, selectedRowKeys) => {
    this.setState({ selectedRowKeys, selectedRows });
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = pagination => {
    this.getList(pagination.current, pagination.pageSize);
  };

  render() {
    const { selectedRowKeys, selectedRows } = this.state;
    const { noBillData } = this.props;
    const columns = [
      {
        title: '签约方',
        dataIndex: 'sendSuppName',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
      },
      {
        title: '账单年月',
        dataIndex: 'billYm',
        sorter: (a, b) => new Date(b.billYm) - new Date(a.billYm),
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => val && `${val.toString().substr(0, 4)}-${val.toString().substr(4, 5)}`,
      },
      {
        title: '金额',
        dataIndex: 'billAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
        render: billAmo => (billAmo ? formatNumber(billAmo) : billAmo === 0 ? 0 : '--'),
      },
      {
        title: '涉及人数',
        dataIndex: 'involvePersonNum',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
      },
      {
        title: '操作',
        dataIndex: 'remark',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder' } }),
        render: (text, record) => (
          <div>
            <a
              onClick={() =>
                router.push(
                  `/chargmanage/chargebillns/tobill?billYm=${record.billYm}&sendSuppId=${
                    record.sendSuppId
                  }&creType=2`
                )
              }
            >
              查看
            </a>
            {checkPermissions('ns:nsBillChrg:createBill') && <Divider type="vertical" />}
            {checkPermissions('ns:nsBillChrg:createBill') && (
              <a
                onClick={() =>
                  router.push(
                    `/chargmanage/chargebillns/tobill?billYm=${record.billYm}&sendSuppId=${
                      record.sendSuppId
                    }&creType=2&enterActiveKey=${2}`
                  )
                }
              >
                生成账单
              </a>
            )}
          </div>
        ),
      },
    ];
    return (
      <div>
        <Alert
          message={
            <Fragment>
              未进账单数据是指 ：当月生成账单之后，已经生成费用明细但未进账单的数据
            </Fragment>
          }
          type="info"
          showIcon
          style={{ marginBottom: 16 }}
        />
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          data={noBillData}
          rowKey={(record, index) => index}
          columns={columns}
          onChange={this.handleStandardTableChange}
          onSelectRow={this.handleSelectRows}
          rowSelection={null}
        />
      </div>
    );
  }
}
export default BasicList;
